//var chartOutChar = null;
// 基于准备好的dom，初始化echarts实例
var pieChart = echarts.init(document.getElementById('pieChart'));
// 指定图表的配置项和数据
var pieOption = {
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            data:[],
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};


//折线图
// var lineChart = echarts.init(document.getElementById('lineChart'));
// var lineOption = {
//     tooltip: {
//         trigger: 'axis'
//     },
//     legend: {
//         data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
//     },
//     grid: {
//         left: '3%',
//         right: '4%',
//         bottom: '3%',
//         containLabel: true
//     },
//     toolbox: {
//         feature: {
//             saveAsImage: {}
//         }
//     },
//     xAxis: {
//         type: 'category',
//         boundaryGap: false,
//         data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
//     },
//     yAxis: {
//         type: 'value'
//     },
//     series: [
//         {
//             name: '邮件营销',
//             type: 'line',
//             stack: '总量',
//             data: [120, 132, 101, 134, 90, 230, 210]
//         },
//         {
//             name: '联盟广告',
//             type: 'line',
//             stack: '总量',
//             data: [220, 182, 191, 234, 290, 330, 310]
//         },
//         {
//             name: '视频广告',
//             type: 'line',
//             stack: '总量',
//             data: [150, 232, 201, 154, 190, 330, 410]
//         },
//         {
//             name: '直接访问',
//             type: 'line',
//             stack: '总量',
//             data: [320, 332, 301, 334, 390, 330, 320]
//         },
//         {
//             name: '搜索引擎',
//             type: 'line',
//             stack: '总量',
//             data: [820, 932, 901, 934, 1290, 1330, 1320]
//         }
//     ]
// };
// lineChart.setOption(lineOption);



// vue返回可视化页面数据
// var vm = new Vue({
//     el: '#app',
//     data: {
//     },
//     created() {
//         this.getPieList()
//     },
//     methods: {
//         getPieList(){
$.ajax({
    type: "get",
    url: "/copWarehouse/pieList/10",
    headers: { 'Content-Type': 'application/json;charset=utf-8' },
    dataType: 'json',
    async: true,
    data: {},
    success: function (result) {
        if (result.code === 500) {
            alert("获取失败")
            location.reload([true])
        }else{
            var servicedata=[];
            for(var i=0;i<result.data.length;i++){
                var obj=new Object();
                obj.name=result.data[i].warehouseName;
                obj.value=result.data[i].metalSize;
                servicedata[i]=obj;
            }
            pieOption.series[0].data=servicedata
            console.log(pieOption.series[0].data)
            // 使用刚指定的配置项和数据显示图表。
            pieChart.setOption(pieOption)

        }
    }
});
//         },
//         back(){
//             window.location.href="visual.html"
//         }
//     }
// })
var vm1 = new Vue({
    el: '#app1',
    data:{
        departmentList:'',
        warehouseList:''
    },
    created(){
        this.getDepartmentList()
    },
    methods:{
        getDepartmentList(){
            $.ajax({
                type: "get",
                url: "/copDepartment/allList",
                headers: { 'Content-Type': 'application/json;charset=utf-8' },
                dataType: 'json',
                async: true,
                data: {},
                success: function (result) {
                    if (result.code === 500) {
                        alert("获取失败")
                        location.reload([true])
                    }else{
                        var servicedata=[];
                        for(var i=0;i<result.data.length;i++){
                            var obj=new Object();
                            obj.departmentId=result.data[i].departmentId;
                            obj.departmentName = result.data[i].departmentName;
                            servicedata[i]=obj;
                        }

                        vm1.departmentList=servicedata
                        // alert('data:' + vm1.departmentList)
                        // alert('ser:' + servicedata)
                    }
                }
            });
        },
        updatePieList(id){
            $.ajax({
                type: "get",
                url: "/copWarehouse/pieList/"+id,
                headers: { 'Content-Type': 'application/json;charset=utf-8' },
                dataType: 'json',
                async: true,
                data: {},
                success: function (result) {
                    if (result.code === 500) {
                        alert("获取失败")
                        location.reload([true])
                    }else{
                        var servicedata=[];
                        for(var i=0;i<result.data.length;i++){
                            var obj=new Object();
                            // obj.name=result.data[i].productId;
                            obj.name=result.data[i].warehouseName;
                            obj.value=result.data[i].metalSize;
                            servicedata[i]=obj;
                        }
                        pieOption.series[0].data=servicedata;
                        var warhouseListdata=[];
                        for(var i=0;i<servicedata.length;i++){
                            var obj=new Object();
                            obj.warehouseName=servicedata[i].name;
                            obj.metalSize=servicedata[i].value;
                            warhouseListdata[i] = obj;
                        }
                        vm2.countMonthOut(id,warhouseListdata)
                        // vm2.warehouseList =  warhouseListdata;
                        console.log(pieOption.series[0].data);
                        // 使用刚指定的配置项和数据显示图表。
                        pieChart.setOption(pieOption)

                    }
                }
            });
        }
    }
});

layui.use(['element','form'], function(){
    var element = layui.element;
    var form = layui.form;
    var  layer = layui.layer;
    setTimeout(function (){
        form.render('select');
    }, 500);

    form.on('select(department)', function (data) {
        // alert(data.value);
        vm1.updatePieList(data.value)
        form.render('select');
    });
});

var vm2 = new Vue({
    el: '#app2',
    data:{
        warehouseList:[]
    },
    created(){

    },
    methods:{
        countMonthOut(id,warhouseListdata){
            $.ajax({
                type: "get",
                url: "/copWarehouse/tableList/"+id,
                headers: { 'Content-Type': 'application/json;charset=utf-8' },
                dataType: 'json',
                async: true,
                data: {},
                success: function (result) {
                    if (result.code === 500) {
                        alert("获取失败")
                        location.reload([true])
                    }else{
                        for(var i=0;i<result.data.length;i++){
                            warhouseListdata[i].monthOut = result.data[i].metalSize;
                        }
                        vm2.warehouseList =  warhouseListdata;
                    }
                }
            });
        }
    }
});

var base = +new Date(2000, 1, 1);
var oneDay = 24 * 3600 * 1000;
var date = [];

var data = [Math.random() * 300];

for (var i = 1; i < 20000; i++) {
    var now = new Date(base += oneDay);
    date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
    data.push(Math.round((Math.random() - 0.5) * 2 + data[i - 1]));
}
var mychar = echarts.init(document.getElementById('standard-area'));
var option = {
    //图表的标题
    title: {
        // left: 'center',
        text: '"广银鑫"投资金条库存量(100克)'
    },
    //图表展示的类别，这里的data和series中得name对应
    legend: {
        data: ['"广银鑫"投资金条(100克)']
    },
    //这里的是采用什么方式触发数据，这里显示的竖轴，跟随鼠标移动到节点上会显示内容
    tooltip: {
        trigger: 'axis',
        position: function (pt) {
            return [pt[0], '10%'];
        },

    },
    //代表x轴，这里type类型代表字符
    xAxis: [{
        type: 'category',
        boundaryGap: false,//这里表示是否补齐空白
        // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        data:date
    }],
    //代表y轴，这里type类型代表num类型
    yAxis: {
        type: 'value',
        name: '单位：千克',
        axisLabel: {
            formatter: '{value} 万'
        },
        min: 0,
        max: 80,
        interval: 20,
        // boundaryGap: [0, '100%']
    },
    //图表类型，type表示按照什么类型图表显示，line代表折线，下面的内容与
    //legend一一对应
    dataZoom: [{
        type: 'inside',
        start: 0,
        end: 10
    }, {
        start: 0,
        end: 10,
        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        handleSize: '80%',
        handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
        }
    }],
    series: [{
        name: '"广银鑫"投资金条',
        type: 'line',
        symbol: 'none',
        sampling: 'average',
        smooth: true,
        itemStyle: {
                color: '#2378f7',
                lable:{
                    show:true,
                }
        },
        markLine : {
            data : [
                {type : 'average',
                    // name: '平均值' ,
                    symbol:"none",   //该线无样式
                    lineStyle: {        //设置该线样式
                        normal: {
                            color: "#ff0000"
                        }
                    }
                 }
            ]
        },
        areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

            //     offset: 0,
            //     color: 'rgb(255, 158, 68)'
            // }, {
            //     offset: 1,
            //     color: 'rgb(255, 70, 131)'
            // }
                {offset: 0, color: '#83bff6'},
                {offset: 1, color: '#2378f7'}
            ])

        },
        // data: [10, 12, 21, 54, 260, 830, 710]
        data:data
    }]
};
//配置图表设置并读取
mychar.setOption(option);
